Skip to content

Conversation

@zehjotkah
Copy link
Contributor

Description

allowing toLowerCase(), replace(), and split() to be used in the expression editor.

Real life use-case explained in the discord message.
https://discord.com/channels/955905230107738152/1418928616648998992/1419623805541814393

Steps for reproduction

  1. use any of the mentioned functions in the expression editor
  2. they're currently not allowed even though they'd be safe to use
  3. those functions (and presumably others as well) can be used in hosted webstudio by deploying my changes on a locally hosted webstudio editor, using the functions, and copying the pages containing the functions to the hosted version.
    -> validation check bypass

Code Review

  • hi @kof, I need you to do
    • conceptual review (does webstudio WANT to allow these functions?)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file

@zehjotkah zehjotkah changed the title enabling safe functions in expression engine feat: enabling safe functions in expression engine Sep 23, 2025
@kof
Copy link
Member

kof commented Sep 23, 2025

My only wish is that we would support the entire js there and not a few functions, because:

  1. we can't tell this is just javascript without it
  2. AI won't be able to help unless it knows the whitelisted functions
  3. people will always ask why X works and Y doesn't

@zehjotkah
Copy link
Contributor Author

I'd love webstudio to support the entire js in the expression editor!
With this PR I wanted to make the minimum changes necessary for my usecase.

@zehjotkah
Copy link
Contributor Author

zehjotkah commented Sep 24, 2025

My only wish is that we would support the entire js there and not a few functions, because:

1. we can't tell this is just javascript without it

2. AI won't be able to help unless it knows the whitelisted functions

3. people will always ask why X works and Y doesn't

That's a fair point. A random list of functions is confusing, and you're right, people will always wonder why one thing works and another doesn't.

The problem with allowing everything is the security risk, right? Stuff like fetch or accessing document could open up XSS holes, and things like while(true){} could crash the builder, if I understand it correctly.

So what if we set a clear rule for what's allowed? We could support all the standard methods on primitives (Strings, Arrays, etc.) as long as they don't mutate the original data.

That way, it feels like you're just writing JavaScript for data manipulation. Methods like .map() or .slice() would be fine, but something like .pop() or .splice() wouldn't, because they change the original array and could cause weird side effects.

My PR for split(), replace(), and toLowerCase() fits this rule. It solves a real problem for building dynamic pages. Right now, those functions do work if you paste them in from a local webstudio fork where the validation check is turned off, so the linter is already out of sync with the runtime.

What do you think? I'm happy to expand the PR to include more of these "safe" methods if you agree on this as the general rule.

…y methods

This pull request enhances the expression engine to support a curated list of safe, non-mutating methods on the String and Array prototypes.
added optional chaining and additional tests.
@zehjotkah
Copy link
Contributor Author

do you want me to change anything else?
Thanks!

@TrySound
Copy link
Member

TrySound commented Oct 9, 2025

All good. We were just a occupied with inception recently. Though you can try to add autocomplete for these methods if you want.

@zehjotkah
Copy link
Contributor Author

you can try to add autocomplete for these methods if you want.

like this?
Bildschirmfoto 2025-10-09 um 16 45 38

@TrySound
Copy link
Member

TrySound commented Oct 9, 2025

Yes, maybe even with parentheses for clarity like this toLowerCase()

@TrySound
Copy link
Member

TrySound commented Oct 9, 2025

Btw I will merge this. You can start new PR

@TrySound TrySound merged commit 4640cea into webstudio-is:main Oct 9, 2025
9 of 11 checks passed
@TrySound
Copy link
Member

TrySound commented Oct 9, 2025

Thanks!

@kof
Copy link
Member

kof commented Oct 9, 2025

Good job @zehjotkah !

TrySound pushed a commit that referenced this pull request Oct 15, 2025
## Description

Added autocomplete support for safe string and array methods in the
expression editor, as suggested by @TrySound in PR #5403.

## Changes

- Exported `allowedStringMethods` and `allowedArrayMethods` from
`packages/sdk/src/expression.ts`
- Enhanced the expression editor's autocomplete to suggest safe methods
when typing after a variable (e.g., system)
- Methods are displayed with parentheses for clarity (e.g.,
`toLowerCase()`, `replace()`, `split()`)
- Autocomplete shows helpful labels: "string method" or "array method"

## How to Test

1. Open any project in the builder
2. Click the expression editor icon next to a text property
3. Type a variable name followed by a dot (e.g., `system.`)
4. You should see autocomplete suggestions for safe string methods like
`toLowerCase()`, `replace()`, `split()`, etc.
5. Type a few letters to filter (e.g., `title.to` shows only methods
starting with "to")
6. Select a method and it will be inserted with parentheses

## Related

- Builds on PR #5403 which enabled these safe methods in the expression
engine

<img width="343" height="204" alt="Bildschirmfoto 2025-10-09 um 22 33
03"
src="https://github.com/user-attachments/assets/206a36e8-1d68-4e2a-a045-1f9e95067a28"
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants